<template>
  <view class="home-head">
    <view class="head">
		<image class="logo" src="/static/images/shaologo.png" @click="goToHome()"></image> 
			<view class="head-left" @click="goToSearchPage()">
				
				
				<view class="serach-box">
					<uni-search-bar placeholder="search" bgColor="#F2F2F2" @confirm="search" clearButton="none" cancelButton="none" />
					
				</view>
				<view class="login" @click="openLogin()">
					<image class="login-img" src="/static/images/miaosang/login.png"></image>
					
				</view>
			</view>
			
			<uni-popup ref="loginpopup" type="center">
				 <view class="popbgmsg-box" >
					 <view class="box-top">
						<view class="login" :class="[tabIndex==1?'active':'']" @click="choose(1)">login</view>
						<view class="register" :class="[tabIndex==2?'active':'']" @click="choose(2)">register</view>
					 </view>
					 <view class="login-box" v-if="tabIndex==1">
						  <view class="email">
						 	<image src="/static/images/youxiang.png"></image>
						 	<input type="text" class="phone-ipt" value="" v-model="email" placeholder="Please Input Your Email " placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
						  </view>
						  <view class="password">
						 	<image src="/static/images/mima.png"></image>
						 	<input type="password" class="phone-ipt" value="" v-model="password" placeholder="Please Input Password " placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
						  </view>
						  
						  <view class="submit" @click="loginNow()">Login</view>
					 </view>
					 <view class="register-box" v-if="tabIndex==2">
					 	<view class="username">
							<image src="/static/images/denglu.png"></image>
							<input type="text" class="phone-ipt" value="" v-model="username" placeholder="please enter user name " placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
						</view>	
						 <view class="email">
							<image src="/static/images/youxiang.png"></image>
							<input type="text" class="phone-ipt" value="" v-model="email" placeholder="Please Input Your Email " placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
						 </view>
						 <view class="password">
							<image src="/static/images/mima.png"></image>
							<input type="password" class="phone-ipt" value="" v-model="password" placeholder="Please Input Password " placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
						 </view>
						 
						 <view class="submit" @click="registeNow()">Submit</view>
					 </view>
				 </view>
				 
			</uni-popup> 
      </view> 
    </view>
	
	
  </view>
</template>

<script>
import { register } from 'api/authApi.js'
import store from "store"
import {mapGetters,mapActions} from 'vuex'
export default {
  name: "HomeHeadCom",
  props: {
    isMiniSearchShow: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    headHeight: 0,
    statusBarHeight: 130,
	'tabIndex':1,
	'username':'',
	'email':'',
	'password':''
  }),
  methods: {
	  ...mapActions([
	  	'login'
	  ]),
    goToStrategy() {
      uni.navigateTo({url: `/packs/one/pages/user/strategy`})
    },
	goToHome() {
	  uni.navigateTo({url: '/'})
	},
    goToSearchPage() {
      uni.navigateTo({url: '/packs/pages/product/search'})
    },
	openLogin(){
		
		this.$refs.loginpopup.open('center')
	},
	goGetRedpackagePage(){
		uni.navigateTo({url: '/packs/pages/getRedpackage/getRedpackage'})
	},
	choose(index){
		this.tabIndex=index;
	},
	registeNow() {
		if (this.username == '') {
			uni.showToast({
				icon:'none',
				title:'请输入登录名'
			})
		} else if (this.email == '') {
			uni.showToast({
				icon:'none',
				title:'请输入邮箱'
			})
		} else if (this.password == '') {
			uni.showToast({
				icon:'none',
				title:'请输入密码'
			})
		}else {
			let params = {
				username: this.username,
				email: this.email,
				password: this.password
			}
			register(params).then(res=>{
				if(!res.message){
					uni.showToast({
					  title: 'Register Success',
					  icon: 'success',
					  duration: 2000
					});
					
				}else{
					
					uni.showToast({
					  title: res.message,
					  icon: 'error',
					  duration: 2000
					});

				}
				
			})
		}
	},
	loginNow() {
		if (this.email == '') {
			uni.showToast({
				icon:'none',
				title:'请输入邮箱'
			})
		} else if (this.password == '') {
			uni.showToast({
				icon:'none',
				title:'请输入密码'
			})
		}else {
			let params = {
				email: this.email,
				password: this.password
			}
			this.login(params);
		}
	},
	
  },
  created() {
    this.headHeight = uni.getSystemInfoSync().statusBarHeight*2+80
  }
}
</script>

<style lang="scss" scoped>
.home-head {
	width: 100%;
	height:120rpx;
	padding-bottom: 20rpx;
	margin: 0 auto;
	
  .head {
		width: 100%;
		max-width:1920px;
		height: 88rpx;
		margin:0 auto;
		justify-content:space-between;
		align-items: center;
		 padding-top:20rpx;
		 display: flex;;
	 
		.head-left{
			display: flex;
			align-items: center;
			justify-content:right;
		}
		
		.serach-box{
			width: 300px;
			height: 80rpx;
			background: #F2F2F2;
			display: flex;
			justify-content:center;
			align-items: center;
			border-radius: 5px;
			border:1px solid #999;
			
			.uni-searchbar{
				
				width:100%;
				
			}
			
		}
		.uni-searchbar__box{
			
			justify-content:left;
		}
		.login{
			//margin-right:20px;
		}
		.login-img{
			
			width:30px;
			height:30px;
			padding:0px 20px;
		}
	}
	.logo{
		height:80px;
		cursor: pointer;
	}
	.popbgmsg-box{
		width:280px;
		height:400px;
		background:#fff;
	}
	.box-top{
		padding-top:10px;
		height:50px;
		display:flex;
		align-items: center;
		
		margin:0 auto;
		justify-content: space-around;
		>view{
			width:30%;
			line-height:50px;
			text-align: center;
			
		}
		.active{
			color:#FFAE2E;
			border-bottom:2px solid #FFAE2E;
		}
	}
	.register-box{
		
		>view{
		 display:flex;
		 width:250px;
		 align-items: center;
		 justify-content: center;
		 height:40px;
		 border:1px solid #ccc;
		 border-radius: 5px;
		 margin:20px auto 0;
			>image{
				width:20px;
				height:20px;
				margin-right:10px;
			}
		}
		
		.submit{
			width:160px;
			height:40px;
			background:#FFAE2E;
			color:#fff;
			text-align:center;
			line-height:40px;
			border-radius: 5px;
			margin:30px auto 0;
		}
	}
	
	.login-box{
		
		>view{
		 display:flex;
		 width:250px;
		 align-items: center;
		 justify-content: center;
		 height:40px;
		 border:1px solid #ccc;
		 border-radius: 5px;
		 margin:20px auto 0;
			>image{
				width:20px;
				height:20px;
				margin-right:10px;
			}
		}
		
		.submit{
			width:160px;
			height:40px;
			background:#FFAE2E;
			color:#fff;
			text-align:center;
			line-height:40px;
			border-radius: 5px;
			margin:30px auto 0;
		}
	}
}
</style>
